<template>
	<view class="container">
		<!-- 第一张卡片：今日数据 -->
		<view class="card first-card">
			<view class="header">
				<text class="title">今日数据（{{ todayDate }}）</text>
				<view class="icon-wrapper" @click="toggleShow">
					<u-icon :name="showData ? 'eye-fill' : 'eye-off'" color="#909399" size="24" />
				</view>
			</view>

			<u-row gutter="16" justify="space-between" class="data-header">
				<u-col span="4">
					<text class="data-title">销售额</text>
				</u-col>
				<u-col span="4">
					<text class="data-title">订单数</text>
				</u-col>
				<!-- <u-col span="4">
					<text class="data-title">回头率</text>
				</u-col> -->
			</u-row>

			<u-row gutter="16" justify="space-between" class="data-row">
				<u-col span="4">
					<view class="data-item">
						<text class="value sales">{{ showData ? fenToYuan(orderData.value.orderPayPrice) || 0 : '****' }}</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="data-item">
						<text class="value">{{ showData ? orderData?.value?.orderPayCount || 0 : '****' }}</text>
					</view>
				</u-col>
				<!-- <u-col span="4">
					<view class="data-item">
						<text class="value">{{ showData ? returnRate : '****' }}</text>
					</view>
				</u-col> -->
			</u-row>
		</view>

		<!-- 第二张卡片：实时订单信息 -->
		<view class="card second-card">
			<view class="header">
				<text class="title">实时订单 </text>
			</view>

			<view class="order-list">
				<view v-for="order in useStore.orderList" :key="order.id" class="order-item">
					<view class="order-header">
						<text>订单号: {{ order.id }}</text>
						<text>状态: {{ getStatusText(order.status) }}</text>
					</view>
					<view class="order-body">
						<text>商品数量: {{ order.productCount }}</text>
						<text>总金额: {{ order.payPrice / 100 }}元</text>
						<view class="row-container">
							<text>时间: {{ formatTime(order.createTime) }}</text>
							<text class="button" @click="goToOrderDetail(order)">查看详情</text>
						</view>
					</view>
					<!-- <view class="order-footer">
						<text class="button" @click="goToOrderDetail(order)">查看详情</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<!-- <u-tabbar :value="currentTab" @change="handleTabChange" :fixed="true" :placeholder="true">
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="订单" icon="order"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar> -->
		<!-- <btools></btools> -->
	</view>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { fenToYuan } from '@/utils';
import url from '@/config';

import { getRefreshToken } from '@/utils/auth';
import btools from '@/components/btools.vue';
import { useOrderStore } from '@/store/modules/order';
import { useOrderWebSocket } from './orderwebsocket';
let orderStore = useOrderWebSocket();

// 数据定义
let useStore = useOrderStore();
//const orderList = useStore.orderList;

const dailySales = ref('￥5000');
const dailyOrderCount = ref('50');
const returnRate = ref('30%');
const showData = ref(false);
const currentTab = ref(0);
const receivedMessage = ref({});

const tenantId = uni.getStorageSync('tenantId');
const accessToken = uni.getStorageSync('refreshToken');
//uni.hideTabBar();
// 获取当前日期
const todayDate = ref('');
//const orderData = ref({ value: { orderPayPrice: 0, orderPayCount: 0 }, reference: { orderPayPrice: 0, orderPayCount: 0 } });
const orderData = ref({
	value: { orderPayPrice: 0, orderPayCount: 0 },
	reference: { orderPayPrice: 0, orderPayCount: 0 },
});

const toggleShow = () => {
	showData.value = !showData.value;
	getOrderComparison();
};

onMounted(() => {
	const refreshToken = uni.getStorageSync('refreshToken');
	if (!refreshToken) {
		uni.navigateTo({
			url: '/pages/login/login',
		});
	} else {
		getOrderComparison();
	}
});
//const orderComparison = ref<DataComparisonRespVO<TradeStatisticsApi.TradeOrderSummaryRespVO>>(); // 交易对照数据
/** 查询交易对照卡片数据 */

const getOrderComparison = () => {
	const tenantId = uni.getStorageSync('tenantId');
	const accessToken = uni.getStorageSync('refreshToken');
	uni.request({
		url: url.baseUrl + '/statistics/trade/order-comparison',
		header: {
			Accept: '*/*',
			'Tenant-Id': tenantId,
			Authorization: `Bearer ${accessToken}`,
		},
		method: 'GET',
		success: (res) => {
			if (res.data.code === 0) {
				orderData.value = typeof res.data === 'string' ? JSON.parse(res.data.data) : res.data.data;
			} else {
				console.log('请求失败:', res.data);
			}
		},
		fail: (err) => {
			console.error('请求失败:', err);
		},
	});
};

// 根据状态码返回状态文本
const getStatusText = (status) => {
	switch (status) {
		case 10:
			return '未发货';
		case 20:
			return '已发货';
		default:
			return '未知状态';
	}
};
const goToOrderDetail = (order) => {
	// 将订单数据序列化为 JSON 字符串
	const orderData = encodeURIComponent(JSON.stringify(order));
	uni.navigateTo({
		url: `/pages/order/OrderDetail/OrderDetail?orderData=${orderData}`, // 通过 URL 传递数据
	});
};
// 格式化时间戳
const formatTime = (timestamp) => {
	const date = new Date(timestamp);
	return date.toLocaleTimeString(); // 返回格式如 "10:00:00"
};

const getTodayDate = () => {
	const date = new Date();
	const year = date.getFullYear(); // 年
	const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月，补零
	const day = date.getDate().toString().padStart(2, '0'); // 日，补零
	return `${year}-${month}-${day}`; // 返回格式如 "2023-10-12"
};
todayDate.value = getTodayDate();

function showOrderNotification() {
	// 显示通知逻辑
	uni.showToast({
		title: '新订单来了!',
		icon: 'none',
		duration: 2000,
	});
}
</script>
<style lang="scss" scoped>
/* 全局容器 */
.container {
	padding: 20px;
	background-color: #f9fafb; /* 使用浅灰色背景，提升整体舒适感 */
}

/* 卡片通用样式 */
.card {
	padding: 20px;
	border-radius: 10px; /* 增大圆角，更柔和 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	margin-bottom: 20px;
	transition: transform 0.2s ease-in-out; /* 鼠标悬停时添加动画效果 */
	&:hover {
		transform: translateY(-5px);
	}
}

.first-card {
	background-color: #333333;
	color: #ffffff; /* 文字改为白色，增强对比度 */
}

.second-card {
	background: linear-gradient(to bottom, #ffcc00, #ffffff); /* 调整渐变色，使用明亮的黄色到白色 */
	color: #333333; /* 文字改为深色，与背景形成对比 */
}

.card3 {
	background-color: #444444;
	color: #ffffff; /* 文字改为白色，增强对比度 */
}

/* 头部样式 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.title {
	font-size: 18px;
	font-weight: bold; /* 加粗标题 */
	color: #ffffff;
}

.icon-wrapper {
	padding: 8px;
	cursor: pointer;
	background-color: #f0f0f0; /* 添加背景色，突出图标区域 */
	border-radius: 50%; /* 圆形按钮 */
	transition: background-color 0.2s ease-in-out;
	&:hover {
		background-color: #e0e0e0; /* 鼠标悬停时改变背景色 */
	}
}
.row-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
/* 数据展示样式 */
.data-header {
	margin-bottom: 10px;
}

.data-title {
	font-size: 14px;
	color: #ffffff;
	text-align: center;
}

.data-row {
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
}

.data-item {
	flex: 1;
	text-align: center;
}

.value {
	font-size: 20px; /* 增大数值字体 */
	font-weight: bold;
	color: #ffffff;
}

.sales {
	color: #ffcc00; /* 销售数据使用亮黄色 */
}

/* 表格样式 */
.order-table {
	margin-top: 10px;
}

.table-header,
.table-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #e0e0e0;
}

.header-item,
.row-item {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #333333;
}

.table-row {
	background-color: #f9fafb; /* 行背景色为浅灰色 */
	&:nth-child(even) {
		background-color: #ffffff; /* 偶数行背景色为纯白 */
	}
}

/* 图表样式 */
.chart-container {
	display: flex;
	justify-content: space-between;
	gap: 20px; /* 增加图表之间的间距 */
}

.chart-item {
	width: 48%;
	background-color: #ffffff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart {
	width: 100%;
	height: 300px; /* 调整高度为固定像素 */
}

/* 实时订单样式 */
.real-time-order {
	color: #ffffff;
	font-size: 16px;
	background-color: #28a745; /* 绿色背景表示实时更新 */
	padding: 10px;
	border-radius: 5px;
	text-align: center;
}

/* 订单列表样式 */
.order-list {
	padding: 20px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.order-item {
	border: 1px solid #e0e0e0;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 10px;
	transition: box-shadow 0.2s ease-in-out;
	&:hover {
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* 鼠标悬停时增加阴影 */
	}
}

.order-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.order-body {
	margin-bottom: 10px;
}

.order-body text {
	display: block;
	margin-bottom: 5px;
	color: #666666; /* 文字颜色为浅灰色 */
}

.button {
	display: inline-block;
	padding: 10px 10px; /* 调整内边距，使按钮更舒适 */
	font-size: 16px; /* 增大字体大小 */
	font-weight: bold;
	color: #ffcc00; /* 文字颜色为白色 */
	background-color: #00ffff; /* 使用蓝色作为主色调 */
	border: none; /* 移除默认边框 */
	border-radius: 5px; /* 添加圆角效果 */
	cursor: pointer; /* 鼠标悬停时显示手型 */
	transition: background-color 0.3s ease, transform 0.2s ease; /* 添加动态过渡效果 */

	&:hover {
		background-color: #0056b3; /* 鼠标悬停时改变背景色 */
		transform: translateY(-2px); /* 稍微上移，增强交互感 */
	}

	&:active {
		transform: translateY(0); /* 按下时恢复原位 */
		background-color: #004085; /* 按下时改变背景色 */
	}
}
</style>
